<template>
  <div class="main-container">
    <!-- 输出 -->
    <div class="output-container">
      <div id="preview">
        <phone-state></phone-state>
        <top-bar></top-bar>
        <chat-container></chat-container>
        <input-bar></input-bar>
      </div>
      <el-button type="primary" id="save-img" @click="saveImg"
        >保存为图像
      </el-button>
      <a :href="qaq" download="哈哈" v-show="false" id="bb">
        　　<img :src="qaq" alt="" />
      </a>
    </div>
    <!-- 输入 -->
    <div class="input-container">
      <div class="operate">
        <div class="time-edit">
          <div>当前时间：</div>
          <el-date-picker
            v-model="$store.state.currentTime"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy-MM-dd HH:mm"
            style="width: 200px"
          >
          </el-date-picker>
        </div>
        <div class="dialogue-edit">
          <div>会话类型：</div>
          <el-switch
            v-model="$store.state.dialogueType"
            active-value="group"
            inactive-value="single"
            active-text="群聊"
            inactive-text="单人会话"
            @change="switchChange"
          >
          </el-switch>
          <div class="group-edit" v-show="isGroup">
            <div>群聊名称：</div>
            <el-input
              v-model="$store.state.groupName"
              placeholder="请输入内容"
              style="width: 160px; margin-right: 16px"
            ></el-input>
            <div>群聊人数：</div>
            <el-input
              v-model="$store.state.groupSize"
              placeholder="请输入内容"
              style="width: 60px"
            ></el-input>
          </div>
        </div>
        <user-def></user-def>
        <message-builder></message-builder>
      </div>
      <el-button type="primary" id="add-msg" @click="addMessage"
        >添加信息</el-button
      >
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import PhoneState from "@/components/PhoneState";
import TopBar from "@/components/TopBar";
import ChatContainer from "@/components/ChatContainer";
import InputBar from "@/components/InputBar";
import MessageBuilder from "@/components/MessageBuilder";
import UserDef from "@/components/UserDefine";
export default {
  name: "home",
  data() {
    return {
      qaq: "",
    };
  },
  components: {
    "phone-state": PhoneState,
    "top-bar": TopBar,
    "chat-container": ChatContainer,
    "message-builder": MessageBuilder,
    "input-bar": InputBar,
    "user-def": UserDef,
  },
  methods: {
    switchChange(newVal) {
      if (newVal == "single" && this.$store.state.userList.length > 2) {
        console.log("清除！");

        this.$store.commit("wipeUser");
      }
    },
    saveImg() {
      let preview = document.getElementById("preview");
      html2canvas(preview, {
        // useCORS: true, // 【重要】开启跨域配置
        // width: preview.clientWidth, //dom 原始宽度
        // height: preview.clientHeight,
        // width: 1080,
        // height: 2340,
        scale: 2340 / preview.clientHeight, // canvas放大倍数，增加图片的清晰度
        logging: false, // 是否开启日志
      }).then((canvas) => {
        this.qaq = canvas.toDataURL("image/jpg");
        console.log(this.qaq);
        window.scroll(0, 0);
        // let aLink = document.createElement("a");
        let aLink = document.getElementById("bb");
        aLink.download = "微信截图.jpg";
        aLink.href = this.qaq;
        aLink.click();
      });
    },
    addMessage() {
      this.$store.commit("addMessage");
    },
  },
  computed: {
    isGroup() {
      if (this.$store.state.dialogueType == "group") {
        return true;
      } else return false;
    },
  },
  mounted() {
    this.$store.commit("initTime");
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
$preview-height: calc(100vh - 100px);
$preview-width: calc((100vh - 120px) * 6 / 13);
.main-container {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  height: 100vh;
  // width: 100%;
  @media screen and (max-width: 1920px) {
    width: 1500px;
  }
  @media screen and (max-width: 1600px) {
    width: 1440px;
  }
  @media screen and (max-width: 1440px) {
    width: 1200px;
  }
}
.output-container {
  margin-top: 30px;
  transform-origin: 0 0;
  overflow: hidden;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  #preview {
    width: $preview-width;
    // height: 704px;
    height: $preview-height;
    // transform: scale(11/10*6);
    display: flex;
    flex-direction: column;
  }
}
.input-container {
  width: 900px;
  margin-top: 30px;
  margin-left: 50px;
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  .operate {
    width: 100%;
    height: $preview-height;
  }
  .dialogue-edit {
    display: flex;
    align-items: center;
    height: 40px;
  }
  .group-edit {
    display: flex;
    align-items: center;
    margin-left: 10px;
    height: 40px;
  }
  .time-edit {
    display: flex;
    align-items: center;
    height: 40px;
  }
}
#save-img,
#add-msg {
  margin-top: 15px;
  width: 120px;
}
</style>
